<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CustomerList</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- bootstrap-table -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading text-center">
            <h2>客户信息列表</h2>
        </div>
        <div class="panel-body">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>手机号</th>
                    <th>职业</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>560001</td>
                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                    <td>400003</td>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                    <td>400003</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td>411027</td>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td>411027</td>
                </tr>
                </tbody>
            </table>
            <table id="table"  class="table table-bordered table-striped"></table>
        </div>
    </div>
</div>
<script>
    $('#table').bootstrapTable({
        pagination: true,  //开启分页
        pageNumber: 1,  //初始化的页码数
        pageSize: 50,  //初始化的分页大小
        pageList: [5, 10, 15, 25, 50, 100],  //可选择的分页大小
        paginationLoop: false,  //关闭分页条无线循环功能
        search: true,  //开启搜索
        showSearchButton: true,  //显示搜索按钮
        columns: [{
            field: 'id',
            title: 'ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }],
        data: [{
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 2,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 3,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 4,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 5,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 6,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 7,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 8,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 2,
            name: 'Item 2',
            price: '$2'
        }]
    })
</script>
</body>
</html>